<template>
  <div class="site-workbench">
    <div class="website-info">
      <div class="info">
        <div class="info-t">
          <div class="info-l">
            <h2 class="title">电脑网站</h2>
            <p>海量组件，10分钟完成搭建</p>
            <p>适配移动端，支持全网营销</p>
            <el-button class="todesign" type="" link @click="toDesign">去设计</el-button>
          </div>
          <div class="info-r">
            <div class="company-name">
              <h3>杭州新爵仕科技有限公司</h3>
              <svg-icon icon-class="share" />
              <span>365天</span>
            </div>
            <div class="url">
              <p>https://www.28273.com</p>
              <span>复制</span>
            </div>
            <div class="operation">
              <el-button type="" link>基础版</el-button>
              <el-button type="" link>中文版</el-button>
            </div>
            <div class="network">
              <span>空间 40G</span>
              <span>剩余 10G</span>
              <span>流量 100M</span>
              <span>剩余 30M</span>
            </div>
            <div class="expire-date">到期时间 2025年4月15日</div>
          </div>
        </div>
        <div class="info-b">
          <div v-for="operate in websiteOperate" :key="operate.title">
            <img class="operate-img" :src="operate.url" alt="" srcset="" />
            <p>{{operate.title}}</p>
          </div>
        </div>
      </div>
      <div class="pv" ref="pv"></div>
    </div>
    <div class="advertising">
      <div class="advertising-1">
        <img src="/src/assets/images/workbench/advertising-1.png" alt="" srcset="" />
      </div>
      <div class="advertising-2">
        <img src="/src/assets/images/workbench/advertising-2.png" alt="" srcset="" />
      </div>
    </div>
  </div>
</template>

<script setup name="Index" lang="ts">
import * as echarts from 'echarts';
import { initWebSocket } from '@/utils/websocket';
import { useRouter } from 'vue-router'

const router = useRouter();
const websiteOperate = [
  {
  url:"/src/assets/images/workbench/add-article.png",
  title:"添加文章",
  },
  {
  url:"/src/assets/images/workbench/article-category.png",
  title:"文章分类",
  },
  {
  url:"/src/assets/images/workbench/add-product.png",
  title:"添加产品",
  },
  {
  url:"/src/assets/images/workbench/product-category.png",
  title:"产品分类",
  },
  {
  url:"/src/assets/images/workbench/log.png",
  title:"操作日志",
  },
]



const goTarget = (url:string) => {
  window.open(url, '__blank')
}
const cache = ref<any>({});
const pv = ref();
// const { proxy } = getCurrentInstance() as ComponentInternalInstance;
// const getList = async () => {
const getList = () => {
  // proxy?.$modal.loading("正在加载缓存监控数据，请稍候！");
  // const res = await getCache();
  // proxy?.$modal.closeLoading();
  // cache.value = res.data;
  const pvIntance = echarts.init(pv.value, "macarons");
  pvIntance.setOption({
    title: {
    text: '访问次数 PV'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['电脑版', '手机版'],
    x:'right'
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['6日', '7日', '8日', '9日', '10日', '11日', '12日']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '电脑版',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '手机版',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
  ]
  });
  window.addEventListener("resize",()=>{
    pvIntance.resize()
  });
}

// 去设计
const toDesign = () => {
  router.push({
    path: '/editor',
    query: {
      websideId: '1'
    }
  });
}

onMounted(() => {
  let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'
  initWebSocket(protocol + window.location.host + import.meta.env.VITE_APP_BASE_API + "/resource/websocket");
  // 获取pv表信息
  getList();
});
</script>

<style scoped lang="scss">
.site-workbench{
  background-color: #f9f9f9;
  display: flex;
  .website-info{
    width: 1225px;
    .info{
      background-color: #fff;
      height: 482px;
      .info-t{
        height: 303px;
        display: flex;
        .info-l{
          width: 660px;
          height: 240px;
          padding: 28px;
          background: url("/src/assets/images/workbench/website-info-bg.png") no-repeat 0 0;
          .title{
            font-weight: 500;
            font-size: 24px;
            color: #FFFFFF;
            line-height: 40px;
            margin: 0;
            margin-bottom: 14px;
          }
          p{
            font-weight: 400;
            font-size: 16px;
            color: #FFFFFF;
            line-height: 26px;
            margin: 0;
            margin-top: 3;
          }
          .todesign{
            width:76px;
            height: 40px;
            background-color: #fff;
            font-weight: 400;
            font-size: 16px;
            color: #658FF3;
            line-height: 16px;
            margin-top: 25px;
          }
        }
        .info-r{
          margin-left: 24px;
          .company-name{
            display: flex;
            align-items:center;
            h3{
              font-weight: 500;
              font-size: 18px;
              color: #3D3D3D;
              line-height: 24px;
              margin: 0;
            }
            svg{
              margin-left: 16px;
            }
            span{
              font-weight: 500;
              font-size: 18px;
              color: #096AFF;
              line-height: 24px;
              margin-left: 65px;
            }
          }
          .url{
            display: flex;
            align-items:center;
            margin-top: 16px;
            p{
              font-weight: 400;
              font-size: 16px;
              color: #3D3D3D;
              line-height: 24px;
              margin: 0;
            }
            span{
              margin-left: 16px;
              font-weight: 400;
              font-size: 16px;
              color: #096AFF;
              line-height: 24px;
            }
          }
          .operation{
            display: flex;
            align-items:center;
            margin-top: 16px;
            button{
              width: 66px;
              height: 32px;
              background-color: #fff;
              border: 1px solid #096AFF;
              color: #096AFF;
            }
          }
          .network{
            display: flex;
            align-items:center;
            margin-top: 16px;
            span{
              font-weight: 400;
              font-size: 16px;
              color: #3D3D3D;
              line-height: 24px;
              margin-right: 16px;
            }
          }
          .expire-date{
            display: inline-flex;
            margin-top: 16px;
            padding: 5px 12px;
            font-weight: 400;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 22px;
            background-color: #096AFF;
          }
        }

      }
      .info-b{
        display: flex;
        div{
          width: 87px;
          height: 140px;
          padding: 24px 16px 16px 15px;
          margin-right: 97px;
          img{
            width: 34px;
            height: 41px;
            margin: 8px 13px 8px 9px;
          }
          p{
            font-weight: 400;
            font-size: 14px;
            color: #3D3D3D;
            line-height: 20px;
          }
        }
      }
    }
    .pv{
      width: 1225px;
      height: 482px;
      padding: 16px;
      margin-top: 16px;
      background-color: #fff;
    }
  }
  .advertising{
    margin-left: 16px;

    .advertising-1{
      margin-bottom: 16px;
    }
    .advertising-1,.advertising-2{
      background-color: #fff;
      width: 431px;
        height: 482px;
        padding: 24px;
      img{
        width: 383px;
        height: 434px;
      }
    }
  }
}
</style>
